<template>
  <a-layout class="admin-layout-main beauty-scroll" :style="'background-image: url('+bgImg(wallpaper)+')'">
    <admin-header :class="[{'fixed-tabs': fixedTabs, 'fixed-header': fixedHeader, 'multi-page': multiPage}]" style="width: 100%;position:fixed;" :menuData="firstMenu" :collapsed="collapsed" :target="target" @toggleCollapse="toggleCollapse"/>
    <a-layout-header :class="['virtual-header', {'fixed-tabs' : fixedTabs, 'fixed-header': fixedHeader, 'multi-page': multiPage}]" v-show="fixedHeader"></a-layout-header>
    <router-view />
  </a-layout>
</template>

<script>
import AdminHeader from '@/layouts/header/AdminHeader'
import {mapState, mapGetters,mapMutations} from 'vuex'

export default {
  name: 'WinLayout',
  components: {AdminHeader},
  data () {
    return {
      collapsed: false,
      showSetting: false,
      drawerOpen: false,
      target: 'window'
    }
  },
  provide() {
    return {
      WinLayout: this
    }
  },
  watch: {
    isMobile(val) {
      if(!val) {
        this.drawerOpen = false
      }
    },
    '$route.path'(){
      this.initTarget();
    }
  },
  computed: {
    ...mapState('setting', ['isMobile', 'theme', 'layout', 'fixedHeader', 'fixedTabs', 'hideSetting', 'multiPage','wallpaper']),
    ...mapState('window', ['iframe']),
    ...mapGetters('setting', ['firstMenu']),
  },
  mounted () {
    this.initTarget();
    window.addEventListener('message', (e)=>{
      if(e.data.mutation){
        if(e.data.mutation=='destroy') e.data.value = this.iframe.filter(item=>new RegExp(e.data.value).test(item.path))[0].id
        this[e.data.mutation](e.data.value)
        if(e.data.mutation=='destroyAll') this.$router.push('/login')
        if(window.frames.length) this.msgSend(window.frames.length,e.data)
      }
      
    })
  },
  methods: {
    ...mapMutations('setting', ['setSize', 'setAnimate', 'setFileResolve', 'setLang', 'setRecycleBin','setSoundEffect','setThumbnail','setFileCheck','setWallpaper','setTheme','setWeekMode','setIconSize','setStoreStatus']),
    ...mapMutations('window', ['destroyAll','destroy']),
    toggleCollapse () {
      this.collapsed = !this.collapsed
    },
    bgImg(val){
      if(/http/.test(val)){
        return val;
      }
      return require('@/assets/img/'+val)
    },
    initTarget(){
      if(this.$route.path=='/desktop'){
        this.target = 'window'
      }else{
        this.target = 'home'
      }
    },
    msgSend(len=0,data){
      for(let i=0;i<len;i++){
        if(window.frames[i].frameElement.id!='layx-win999-iframe'){
          window.frames[i].postMessage(data,'*');
        }
      }
    }
  },

}
</script>

<style lang="less" scoped>
  .virtual-header{
    transition: all 0.2s;
    opacity: 0;
    height: 60px;
    &.fixed-tabs.multi-page:not(.fixed-header){
      height: 0;
    }
  }
  .admin-layout-main{
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    .admin-header{
      top: 0;
      right: 0;
      transition: all 0.2s;
      &.fixed-tabs.multi-page:not(.fixed-header){
        height: 0;
      }
    }
  }
  .setting{
    background-color: @primary-color;
    color: @base-bg-color;
    border-radius: 5px 0 0 5px;
    line-height: 40px;
    font-size: 22px;
    width: 40px;
    height: 40px;
    box-shadow: -2px 0 8px @shadow-color;
  }
</style>
